<template>
  <div>
    <h2>会员信息列表</h2>
    <a href="/">登录</a>
    <br />
    <a href="/add">会员新增</a>
    <br />
    <a href="https://localhost:7065/api/Mem/Getmember">会员信息导出</a>
    <br />
    <a href="/ladd">等级添加</a>
    <br />
    <a href="/lshow">等级显示</a>
    <br />
    <a href="/lshow">会员等级信息</a>
    <br />
    <a href="/qshow">权益信息</a>
    <br />
    <input type="text" placeholder="会员昵称" v-model="page.name" />
    <input type="text" v-model="page.sage" />
    -
    <input type="text" v-model="page.eage" />
    <select v-model="page.level">
      <option value="0">请选择会员等级</option>
      <option value="1">青铜会员</option>
      <option value="2">白银会员</option>
      <option value="3">黄金会员</option>
      <option value="4">钻石会员</option>
      <option value="7">超级会员</option>
    </select>
    <input type="button" value="查询" @click="chax" />
    <table class="table">
      <thead>
        <tr>
          <td>会员id</td>
          <td>名称</td>
          <td>年龄</td>
          <td>头像</td>
          <td>等级</td>
          <td>性别</td>
          <td>电话</td>
          <td>状态</td>
          <td>修改</td>
          <td>状态修改</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="e in data">
          <td>{{ e.id }}</td>
          <td>{{ e.memName }}</td>
          <td>{{ e.age }}</td>
          <td>
            <img
              :src="'https://localhost:7065' + e.img"
              style="height: 100px; width: 100px"
            />
          </td>
          <td>{{ e.levelName }}</td>
          <td>{{ e.sex == 1 ? "男" : "女" }}</td>
          <td>{{ e.phone }}</td>
          <td>{{ e.state ? "启用" : "禁用" }}</td>
          <td>
            <input type="button" value="修改" @click="updateinfo(e.id)" />
          </td>
          <td>
            <input
              type="button"
              :value="e.state ? '禁用' : '启用'"
              @click="upstateinfo(e.id)"
            />
          </td>
        </tr>
      </tbody>
    </table>
    一共{{ pageinfo.listcount }}页,总共{{ pageinfo.count }}条,每页显示{{
      page.pageSize
    }}条,当前第{{ page.pageIndex }}页
    <input type="button" value="首页" @click="pageid(1)" />
    <input type="button" value="下一页" @click="pageid(2)" />
    <input
      v-for="e in pageinfo.listcount"
      :value="e"
      type="button"
      @click="dianji"
    />
    <input type="button" value="上一页" @click="pageid(3)" />
    <input type="button" value="首页" @click="pageid(4)" />
    <input v-model="page.pageIndex" type="number" /><input
      type="button"
      value="跳转"
      @click="tiaozhuan"
    />
    <select v-model="page.pageSize" @click="yrl">
      <option value="2">2</option>
      <option value="5">5</option>
      <option value="8">8</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";

const router = useRouter();

onMounted(() => {
  XLKS();
  show();
});
//查询
const chax = () => {
  show();
};

const tiaozhuan = () => {
  show();
};
//页容量
const yrl = () => {
  show();
};

//点击页
const dianji = () => {
  show();
};

//页面跳转按钮
const pageid = (val: any) => {
  if (val == 1) {
    page.value.pageIndex = 1;
    show();
  }
  if (val == 2) {
    if (page.value.pageIndex < pageinfo.value.listcount) {
      page.value.pageIndex += 1;
      show();
    }
  }
  if (val == 3) {
    if (page.value.pageIndex > 1) {
      page.value.pageIndex -= 1;
      show();
    }
  }
  if (val == 4) {
    page.value.pageIndex = pageinfo.value.listcount;
    show();
  }
};

//下拉框
const XLK = ref([
  {
    id: 1,
    levelName: "",
    state: true,
  },
]);

const XLKS = () => {
  axios.get("https://localhost:7065/api/LevelMember").then((res) => {
    XLK.value = res.data;
  });
};

//显示model
const data = ref([
  {
    id: 1,
    memName: "李四",
    img: "/img/de9fba1b-291a-42d9-a4b6-4888cc44a52c1.png",
    phone: "18295964858",
    age: 12,
    memberLevelid: 2,
    state: true,
    sex: 1,
    levelName: "白银会员",
  },
]);
const page = ref({
  pageIndex: 1,
  pageSize: 2,
  name: "",
  sage: 0,
  eage: 0,
  level: 0,
});
const pageinfo = ref({
  count: 0,
  listcount: 0,
});

const show = () => {
  axios
    .get("https://localhost:7065/api/Mem/ShowMember", { params: page.value })
    .then((res) => {
      data.value = res.data.listcount;

      pageinfo.value.count = res.data.count;

      pageinfo.value.listcount = Math.ceil(
        pageinfo.value.count / page.value.pageSize
      );
    });
};

//修改跳转
const updateinfo = (val: any) => {
  router.push({ path: "/up", query: { id: val } });
};
//修改状态
const upstateinfo = (val: any) => {
  axios
    .get("https://localhost:7065/api/Mem/UpState", { params: { id: val } })
    .then((res) => {
      if (res.data > 0) {
        alert("状态修改成功");
        show();
      } else {
        alert("状态修改失败");
        return;
      }
    });
};
</script>

<style scoped></style>
